/** * @description : Fab 悬浮按钮 * @descriptionDetail : Fab 悬浮按钮 * @copyright : 浙江烟草 * @author : mc * @create :
2022-10-03 17:12:21 */
<template>
	<movable-area class="movable-area">
		<movable-view class="movable-view" :x="x" :y="y" direction="all" :friction="10" @change="handleChange">
			<view class="uni-fab" :class="{'uni-fab-reverse':horizontal == 'left'}">
				<view class="uni-fab-icon fab-circle-icon" @click="_onClick">
					<view class="uniui-plusempty" :class="{'uni-fab__plus--active': isShow && content.length > 0 }">
						<u-icon name="setting" color="#FFF" size="50"></u-icon>
					</view>
				</view>
				<view class="fab-content" :style="{width : isShow ? contentWidth : '55px'}"
					:class="{'uni-fab-reverse':horizontal == 'left'}">
					<view class="uni-fab__item uni-fab__item--first" />
					<view class="uni-fab__item" v-for="(item, index) in content" :key="index"
						:class="{ 'uni-fab__item--active': isShow }" @click="_onItemClick(index, item)">
						<image :src="item.iconPath" class="uni-fab__item-image" mode="widthFix" />
						<text class="uni-fab__item-text"
							:style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text>
					</view>
				</view>
			</view>
		</movable-view>
	</movable-area>
</template>

<script>
	export default {
		name: "UniFab",
		emits: ["trigger"],
		props: {
			content: {
				type: Array,
				default () {
					return [];
				}
			}
		},
		data() {
			return {
				isShow: false,
				styles: {
					color: "#3c3e49",
					selectedColor: "#049efe",
					backgroundColor: "#fff",
					buttonColor: "#049efe"
				},
				horizontal: "left",
				x: 375, //x坐标
				y: 400 //y坐标
			};
		},
		watch: {
			pattern(newValue) {
				this.styles = Object.assign({}, this.styles, newValue);
			}
		},
		computed: {
			contentWidth() {
				return (this.content.length + 1) * 55 + 10 + 'px';
			}
		},
		methods: {
			_onClick() {
				this.isShow = !this.isShow;
			},
			/**
			 * 按钮点击事件
			 */
			_onItemClick(index, item) {
				this.$emit("fabtrigger", {
					index,
					item
				});
			},
			/**
			 * 获取滑块位置
			 */
			handleChange(e) {
				let x = e.detail.x || e.target.x;
				let sliderX = 55 + 10; // 左右距离为10个像素
				let items = this.content.length;
				if (items * sliderX <= x) {
					this.horizontal = "left";
				} else {
					this.horizontal = "right";
				}
			}
		}
	};
</script>

<style lang="scss">
	$all_width: 55px;
	$all_height: 55px;

	.movable-area {
		width: 100vw;
		height: calc(100vh - 44px - 54px); // 44px 为头部和底部 要适配的高度
		top: 44px;
		left: 0px;
		position: fixed;
		z-index: 99;
		pointer-events: none; //此处要加，鼠标事件可以渗透

		.movable-view {
			width: $all_width;
			height: $all_height;
			pointer-events: auto; //恢复鼠标事件
		}
	}

	.uni-fab {
		height: $all_height;
		position: relative;
		display: flex;
		box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.3);
		border-radius: $all_height;

		.uni-fab-icon {
			width: $all_width;
			height: $all_height;
			background: #049efe;
			position: absolute;
			border-radius: 50%;
			top: 0;
			left: 0;
			z-index: 99;
		}
	}

	.uniui-plusempty {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		transition: -webkit-transform 0.3s;
		transition: transform 0.3s;
		transition: transform 0.3s, -webkit-transform 0.3s;
		font-weight: 200;
		display: flex;
		height: $all_height;
		align-content: center;
		justify-content: center;
	}

	.uni-fab__plus--active {
		transform: rotate(135deg);
	}

	.fab-content {
		width: $all_width;
		height: $all_height;
		box-sizing: border-box;
		display: flex;
		position: absolute;
		flex-direction: row;
		border-radius: 55px;
		overflow: hidden;
		background-color: rgb(255, 255, 255);
		transition-property: width, height;
		transition-duration: 0.2s;
		box-shadow: 0 1px 5px 2px rgba(0, 0, 0, .3);
	}

	.uni-fab-reverse {
		flex-direction: row-reverse;
	}

	.uni-fab__item {
		width: $all_width;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 55px;
		opacity: 0;
		transition: opacity .2s;
	}

	.uni-fab__item-image {
		width: 25px;
		height: 25px;
		margin-bottom: 3px;
	}

	.uni-fab__item-text {
		color: #ffffff;
		font-size: 12px;
	}

	.uni-fab__item--active {
		opacity: 1;
	}
</style>
